<template>
  <div>
    <my-dialog>
      <!-- 在这两个标签 直接写代码，就是给插槽传递结构 -->
      <!-- v-slot 可以简写成 # -->
      <template v-slot:title>
        <h3>添加图书</h3>
      </template>

      <template v-slot:content="{uname,age}">
        <form action="">
          书名:<input type="text" :value="uname" /> <br />
          作者:<input type="text"  :value="age"/> <br />
        </form>
      </template>
      <button>确认添加</button>
      <button>取消</button>
    </my-dialog>

    <!-- <my-dialog>
      <h3>提示</h3>
      <p>你确定要删除吗</p>
      <button>确认</button>
      <button>取消</button>
    </my-dialog> -->




    <my-list :list="users">
      <template #default="obj">
          <button @click="del(obj.id)">删除</button>
      </template>
    </my-list>

    <hr />

    <my-list :list="goods">
      <template #default>
          <button>查看详细</button>
          <button>编辑</button>
      </template>
    </my-list>
  </div>
</template>

<script>
import MyDialog from "./components/MyDialog.vue";
import MyList from './components/MyList.vue';
export default {
  components: { MyDialog, MyList },
  data () {
    return {
      users :[
        {id:2,name:'张三'},
        {id:4,name:'李四'},
        {id:5,name:'王五'},
        {id:6,name:'苏六'},
      ],
      goods:[
        {id:2,name:'方便面'},
        {id:4,name:'板面'},
        {id:5,name:'麻食面'},
        {id:6,name:'热狗'},
      ]
    }
  },
  methods: {
    del(id) {
      this.users=this.users.filter(item=>item.id !==id)
    }
  }
};
</script>

<style>
</style>